<template>
    <!-- 第一行 -->
    <div class="top"> 
      <!-- 第一排 -->
      <div class="first">
      <el-form-item>
      <el-select v-model="form.classify" placeholder="企业分类" style="width: 150px" @change="search">
        <el-option label="国有" value="国有" />
        <el-option label="民营与其它" value="民营与其它" />
        <el-option label="外资" value="外资" />
      </el-select>
    </el-form-item>
      <el-form-item>
      <el-select v-model="form.grade" placeholder="企业分级" style="width: 200px" @change="search">
        <el-option label="市属" value="市属" />
        <el-option label="区属" value="区属" />
      </el-select>
    </el-form-item>
      <el-form-item>
      <el-select v-model="form.industry" placeholder="所属行业" style="width: 200px" @change="search">
        <el-option label="工业" value="工业" />
        <el-option label="服务业" value="服务业" />
        <el-option label="建筑业" value="建筑业" />
      </el-select>
    </el-form-item>
      <el-form-item>
      <el-select v-model="form.zone" placeholder="所属市区" style="width: 200px" @change="search">
        <el-option label="临海市南关区" value="临海市南关区" />
      </el-select>
    </el-form-item>
      <el-form-item>
      <el-select v-model="form.street" placeholder="所属街道" style="width: 200px" @change="search">
        <el-option label="华康街道" value="华康街道" />
      </el-select>
    </el-form-item>
      <!-- 日期 -->
      <div class="demo-date-picker">
        <div class="block">
          <el-date-picker
            v-model="value"
            type="daterange"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
            :size="size"
          />
        </div>
      </div>
      </div>
    


     </div>
       <!-- 第二排 -->
       <div class="second">
     
     <!-- 搜索框 -->
     <div class="asearch">
          <el-input
        v-model="input"
        class="w"
        size="large"
        placeholder="请输入关键词"
        clearable
      />
      <el-button type="primary" class="btn" @click="search">搜索</el-button>
     </div>



     <div class="part">
     <!-- 导出 -->
     <el-button type="primary"  @click="exports">导出数据</el-button>
  <!-- 新建 -->
     <el-button type="primary" @click="create">新建企业信息</el-button>
   </div>
     </div>

    <!-- 功能键 -->
   
    <!-- 表格 -->
     <!-- 企业用户以及信息管理表格 -->
   <div>
        <el-table :data="userList" border style="width: 100%"  #default="scope">
            <el-table-column prop="enterprise_id" label="序号" align="center" width="70"/>
            <el-table-column prop="organization_code" label="组织机构代码" align="center" width="100"/>
            <el-table-column prop="name" label="企业名称" align="center" width="200" />
<!--             <el-table-column prop="code" label="组织机构代码" align="center" /> -->
            <el-table-column prop="classify" label="企业分类" align="center" />
            <el-table-column prop="industry" label="所属行业" align="center" />
            <el-table-column prop="grade" label="企业分级" align="center" />
            <el-table-column prop="zone" label="所属市区" align="center" />
            <el-table-column prop="street" label="所属街道" align="center" />
            <el-table-column prop="update_time" label="更新时间" align="center"   width="200"/>
             <el-table-column fixed="right" label="操作" width="150" align="center">
      <template #default="scope">
        <el-button link type="primary" size="small"  @click="look(scope.$index, scope.row)"
          >查看</el-button
        >
        <el-button link type="primary" size="small"  @click="modify(scope.$index, scope.row)">修改</el-button>
        <el-button link type="primary" size="small"  @click="handleDel(scope.$index, scope.row)" >删除</el-button>
      </template>
    </el-table-column>
        </el-table>
   <!-- 分页 -->
   <div style="margin-left: 20px;" id="pageall">
    <el-pagination
          :current-page="page.pageNum"
          :page-size="page.pageSize"
          :page-sizes="[2, 5, 10, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totallenght"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
   </div>
    </div>
  
</template>
<script lang="ts">
import axios from 'axios'
import {onMounted,ref,defineComponent,reactive} from 'vue'
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
import { markRaw } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import * as XLSX from 'xlsx'
export default defineComponent({
    name: "list",
    setup(){
        //搜索
   const store=useStore()
   const value=ref("")
   const router=useRouter();
   const size=ref("")
   const input=ref("")
   let form:any = ref({
      classify:'',
      grade:'',
      industry:'',
      zone:'',
      street:'',
   })
   //时间戳
   let userList:any=ref([])
    const getDate=(timestamp:any)=>{
     var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
  var Y = date.getFullYear() + '/';
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
  var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
  var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
  var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
  var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
  return Y + M + D + h + m + s;    
 } 
 for(let i=0;i<userList.value.length;i++){
               
  userList.value[i].update_time=getDate(userList.value[i].update_time)
            console.log(897,userList.value[i].update_time)
          }
      //总条数
    let  totallenght=ref()
    //分页
    const page = reactive({//配置对应的查询参数
      pageNum: 1,
      pageSize: 5,
    });
    console.log(11111111111,page.pageNum)
     //渲染表格
    function GetUserData(){
     axios({
      url:'http://1.14.73.59:8080/enterprise/findEnterpriserInformationByCondition',
      method:'post',
      params:{
        pageIndex:page.pageNum,
        pageSize:page.pageSize,
      }
    }).then(resp=>{
     userList.value=resp.data.data
     console.log('00000000',resp.data)
     totallenght.value=resp.data.conut
     console.log(66666666666,totallenght.value)
       const getDate=(timestamp:any)=>{
     var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
  var Y = date.getFullYear() + '/';
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
  var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
  var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
  var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
  var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
  return Y + M + D + h + m + s;    
 } 
 for(let i=0;i<userList.value.length;i++){
               
  userList.value[i].update_time=getDate(userList.value[i].update_time)
            console.log(897,userList.value[i].update_time)
          }
     })
    }
    onMounted(()=>{
      GetUserData()
    })
    const handleSizeChange = (val: number) => {
      page.pageSize = val
      console.log(val)
      GetUserData();
    }
    const handleCurrentChange = (val: number) => {
      page.pageNum = val
      console.log(val)
      GetUserData();
    }

   //搜索
   const search=()=>{
      console.log(form.value.grade,55555)
      axios({
        url:'http://172.16.123.99:8080/enterprise/findEnterpriserInformationByCondition',
        method:'post',
        params:{
          classify:form.value.classify,
          grade:form.value.grade,
          industry:form.value.industry,
          zone:form.value.zone,
          street:form.value.street,
          name:input.value,
          pageIndex:1,
          pageSize:10,     
        }
      }).then(resp=>{   
     userList.value=resp.data.data
       const getDate=(timestamp:any)=>{
     var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
  var Y = date.getFullYear() + '/';
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
  var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
  var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
  var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
  var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
  return Y + M + D + h + m + s;    
 } 
 for(let i=0;i<userList.value.length;i++){
               
  userList.value[i].update_time=getDate(userList.value[i].update_time)
            console.log(897,userList.value[i].update_time)
          }
      })
     }
    //查看
 const look=(index:any,row:any)=>{
  // router.push({path:"/look",query:{id:JSON.stringify(row)}})
  router.push({path:"/look",query:{id:row.enterprise_id}})
        console.log(row.enterprise_id)
        console.log(row)
 }
    //修改
      const modify = (index:any,row:any) => {
        router.push({path:"/modify",query:{id:row.enterprise_id}})
    }
    //删除
    const handleDel=(index:any,row:any)=>{
      ElMessageBox.confirm('确定删除该数据?','提示',{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(()=>{
      axios({
      url:'http://1.14.73.59:8080/enterprise/delEnterpriser',
      method:'post',
      params:{
        id:row.enterprise_id,
      }
    }).then((res) => {
						if(res.data.code === 200){
							ElMessage({
								type: 'success',
								message: '删除成功!'
							});
              userList.value.splice(index,1)
            
						}else{
							ElMessage({
								type: 'error',
								message: '删除失败!'
							});
						}
					}).catch((err) => {
						console.log('错误了',err);
					})
				}).catch(() => {
					//点击了取消按钮
					ElMessage({
						type: 'info',
						message: '已取消删除'
					});          
				});
			}

    //新建企业
    const create = () => {
        router.push('/create')
        axios({
      url:'http://1.14.73.59:8080/enterprise/addEnterpriserInformation',
      method:'post'
    }).then(resp=>{
        const getDate=(timestamp:any)=>{
     var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
  var Y = date.getFullYear() + '/';
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
  var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
  var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
  var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
  var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
  return Y + M + D + h + m + s;    
 } 
 for(let i=0;i<userList.value.length;i++){
               
  userList.value[i].update_time=getDate(userList.value[i].update_time)
            console.log(897,userList.value[i].update_time)
          }
    
     })
    }
    //导出数据
    const exports = () => {
            axios({
                method: "post",
                url: "http://1.14.73.59:8080/enterprise/findEnterpriserList",
            }).then((resp) => {
                console.log(resp)
            })
            const data: any = XLSX.utils.json_to_sheet(userList.value)//此处tableData.value为表格的数据
            const wb: any = XLSX.utils.book_new()
            XLSX.utils.book_append_sheet(wb, data, 'test-data')//test-data为自定义的sheet表名
            XLSX.writeFile(wb, 'table.xlsx')//test.xlsx为自定义的文件名
            console.log(111)
}
       
        return{
            input,
            exports,
            size,
            value,
            search,
            form,
            ref,
            create,
            router,
            store,
            look,
            modify,
            handleDel,
            markRaw,
            userList,
            totallenght,
            ElMessage,
            ElMessageBox,
            useRouter,
            XLSX,
            page,
            handleSizeChange,
            handleCurrentChange,
            reactive        
    }
    }

})



</script>
<style scoped>
/* 第一行 */
.top{
        height: 50px;
        /* border:1px solid red; */
        display: flex;
        flex-direction:column; 
      }
      .first{
        display: flex;
        justify-content:space-between;   
      }
      .second{
        display: flex;
        /* border:1px solid red; */
        justify-content:space-between; 
      }
     .demo-date-picker{
      display: flex;
      margin-top:0px;
     }
     .select{
      width:150px;
      margin: 10px;
    }
    .asearch{
         display:flex;
         flex-direction:row;
         align-items: center;
         justify-content:center;
         position:relative;
      }
      
      .btn{
         position:absolute;
         right:-60px;
      }
/* 表格 */
#pageall {
    margin-top:10px;
    display: flex;
    justify-content: center;
}
.part{
    display:flex;
    justify-content: flex-end; 
    align-items: center;
}
.w {
 height: 31.99px;
 margin: 10px;
}
</style>